import React, { useState, useMemo, useEffect } from 'react'
import {region} from "@/utils/region"

interface props {
    value: string,
    style: React.CSSProperties,
    onChange: (address: string) => void
}
export default function index(props: props) {
    let data: string[]
    data = props.value.split(' ')
    useEffect(() => {
        if (props.value && data.length === 3) {
            setAddress(data as any)
            setState(0)

        }else{
            setAddress([])
        }        
    }, [])

    // 0省/自治区 1市 2区
    let [state, setState] = useState<number>(0)
    //提示消息
    let placeholder = [
        '请选择省/自治区',
        '请选择市/地区',
        '请选择区县'
    ]
    // 地址列表 省/市/区
    let [address, setAddress] = useState<string[]>([])

    //计算当前选取的地址
    let nowAddress = useMemo(() => {
        let str = ''
        address.forEach((item: string) => {
            str += item + ' '
        })
        if (data.length === 4 && address.length === 0) {
            return props.value
        } else {
            return str
        }
    }, [address])

    useEffect(() => {
        //触发onChange事件
        props.onChange(nowAddress)

    }, [address])
    //选择器的显示隐藏
    let [show, setShow] = useState(false)

    //城市联动
    let special = ["台湾省", "香港特别行政区", "澳门特别行政区"]
    let regions = useMemo(() => {
        let province = []
        let city = []
        let area = []
        //省
        if (state == 0) {
            province = region.map((item) => {
                return item.provinceName
            })
            return province
        }
        //市
        if (state == 1) {
            if (special.includes(address[0])) {
                setAddress([...address, '', ''] as any)
                setState(0)
                setShow(false)
                return
            }
            let province = region.find(item => {
                return item.provinceName == address[0]
            })
            if (province) {
                city = province.mallCityList.map(item => {
                    return item.cityName
                })
                return city
            }
        }
        // 区
        if (state == 2) {
            let province = region.find(item => {
                return item.provinceName == address[0]
            })
            if (province) {
                let city = province.mallCityList.find(item => {
                    return item.cityName == address[1]
                })
                if (city) {
                    area = city.mallAreaList.map(item => {
                        return item.areaName
                    })
                    return area
                }
            }
        }
        
    }, [state])
    let handleSelect = (item: string) => {
        if (state == 0) {
            setAddress([item] as any)
            setState(1)
        }
        if (state == 1) {
            setAddress([...address, item] as any)
            setState(2)
        }
        if (state == 2) {
            setAddress([...address, item] as any)
            setState(0)
            setShow(false)
        }
        
    }

    return (
        <div className='z-100 pos-absolute w-400px'
            style={props.style}
        >
            {/* 联级框 */}
            <div  onClick={() => setShow(!show)} className='w-[100%]  text-size-3 bg-white border-1 border-solid border-1 border-gray-300  p-[10px] cursor-pointer overflow-hidden'>
                {props.value && props.value.split(' ').length == 4 || special.includes(props.value) ? <span>{props.value}</span> : <>
                    {address.length < 3 && <span className='text-coolgray pr-10 whitespace-nowrap'>{placeholder[state]}</span>}
                    <span className={address.length < 3 && props.value ? 'text-red whitespace-nowrap' : "text-black"}>{nowAddress}</span></>}
            </div>
            {show && <div className='w-[100%] p-[10px] bg-white bg-white border-1 border-solid border-1 border-gray-300 border-t-none' >
                <div className='flex flex-wrap justify-start p-2'>
                    {
                        regions && regions.map((item) => {
                            return <span key={item} className='text-size-3 cursor-pointer diplay-inline-block  h-6 text-center p-1.2  ' onClick={() => { 
                                handleSelect(item)                               
                             }}>{item}</span>
                        })
                    }
                </div>
            </div>}

        </div>
    )
}


